<template>
    <div class="visitors-warning">
        <dialog-msk :show.sync="showDialog" :width="'420px'" @cancel="closeDialog">
            <div slot="title">探视超时警告</div>
            <div class="warning-list">
                <div v-for="(item,index) in msgList" :key="index">
                    <span class="floor">{{item.sickbedNumber}}</span>有探视人员<span class="name">{{item.visitName}}</span>探视时间超时
                </div>
            </div>
            <div slot="footer"></div>
        </dialog-msk>
    </div>
</template>

<script>
    import dialogMsk from '../components/dialog'

    export default {
        data() {
            return {
                showDialog: false,
                msgList: []
            }
        },
        props: ['show'],
        watch: {
            show(val) {
                if (val) this.showDialog = val
            }
        },
        mounted() {
        },
        methods: {
            closeDialog() {
                let _this = this
                this.$parent.showWarning = false
                _this.msgList = []
            },
            update(list) {
                if (list) this.msgList.push(...list)
            }
        },
        components: {
            dialogMsk
        }
    }
</script>

<style scoped lang="less">
    .visitors-warning {
        /deep/ .el-dialog__wrapper {
            .el-dialog {
                overflow: hidden;
                background-color: transparent;
                margin-bottom: 15vh;
            }

            .el-dialog__header {
                background-color: #FF5959;
                padding: 10px 20px;
                color: #fff;
                letter-spacing: 1px;
                font-size: 16px;
                line-height: 24px;
                text-align: center;
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;

                .el-dialog__headerbtn {
                    top: 13px;

                    .el-dialog__close {
                        color: #fff;
                    }
                }
            }

            .el-dialog__footer {
                display: none;
            }

            .el-dialog__body {
                background-color: #fff;
                border-bottom-left-radius: 8px;
                border-bottom-right-radius: 8px;
            }
        }

        .warning-list {
            > div {
                margin-bottom: 15px;

                .floor {
                    color: #487DFF;
                    margin-right: 5px;
                }

                .name {
                    color: #FD3838;
                    margin: 0 5px;
                }

                .time {
                    color: #FD3838;
                    font-weight: bolder;
                    margin-left: 5px;
                }

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
</style>
